<template>
  <div>
    <HeaderNav title="栏目管理"></HeaderNav>
    <div class="Wrapper">
      <div class="delWrapper">
        <h3>点击删除以下频道</h3>
        <div class="postList">
          <div
            class="item"
            v-for="(item,index) in delList"
            :key="item.id"
            @click="Del(index)"
          >{{item.name}}</div>
        </div>
      </div>
      <div class="addWrapper">
        <h3>点击添加以下频道</h3>
        <div class="postList">
          <div
            class="item"
            v-for="(item,index) in addList"
            :key="item.id"
            @click="Add(index)"
          >{{item.name}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderNav from "../components/headerNav";
export default {
  components: {
    HeaderNav,
  },
  data() {
    return {
      delList: [],
      addList: [],
    };
  },
  created() {
    // 数据备份本地请求
    if (localStorage.getItem("delList")) {
      this.delList = JSON.parse(localStorage.getItem("delList"));
      if (localStorage.getItem("addList")) {
        this.addList = JSON.parse(localStorage.getItem("addList"));
      }
    } else {
      // 发起请求
      this.$axios({
        url: "/category",
      }).then((res) => {
        console.log(res.data);
        this.delList = res.data.data;
      });
    }
  },
  // 数据监听备份
  watch: {
    delList() {
      localStorage.setItem("delList", JSON.stringify(this.delList));
    },
    addList() {
      localStorage.setItem("addList", JSON.stringify(this.addList));
    },
  },
  methods: {
    // 删除事件
    Del(index) {
      if (this.delList.length == 1) {
        return;
      }
      // 添加
      this.addList.push(this.delList[index]);
      // 删除
      this.delList.splice(index, 1);
    },
    // 添加事件
    Add(index) {
      // 添加
      this.delList.push(this.addList[index]);
      // 删除
      this.addList.splice(index, 1);
    },
  },
};
</script>

<style lang="less" scoped>
.Wrapper {
  padding: 10/360 * 100vw 20/360 * 100vw;
  h3 {
    font-size: 14/360 * 100vw;
    font-weight: normal;
    color: #888;
    margin: 10/360 * 100vw 0;
  }
  .postList {
    display: flex;
    flex-wrap: wrap;
    .item {
      padding: 6/360 * 100vw;
      margin: 6/360 * 100vw 6/360 * 100vw;
      border: 1px solid #e4e4e4;
    }
  }
}
</style>